<template>
  <div class="home">
    <el-row type="flex" class="row-bg" justify="center">
      <!-- <el-col :span="8">
        <div class="user">
          <template>
            <el-table :data="map_player_list" style="width: 100%">
              <el-table-column prop="user_exp" label="灵力">
              </el-table-column>
              <el-table-column prop="name" label="姓名">
              </el-table-column>
              <el-table-column prop="status" label="状态"></el-table-column>
              <el-table-column prop="speed" label="操作">
              <template slot-scope="scope">
                <span v-if="scope.row._id != user_info._id">
                  <el-button
                  type="primary"
                  icon="edit"
                  size="small"
                  v-if="scope.row.status == '0'"
                  @click="attack(scope.row._id)"
                  >攻击</el-button
                >
                <el-button
                  type="primary"
                  icon="edit"
                  size="small"
                  v-if="scope.row.status == '1'"
                  @click="attack()"
                  disabled
                  >攻击</el-button
                >
                </span>
              </template>
            </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col> -->
      <el-col :span="14">
        <div class="userinfo">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="fa fa-drivers-license"></i>
              <span>个人信息</span>
            </div>
            <div class="text item">姓名：{{ user_info.name }}</div>
            <div class="text item">
              生命值：{{ user_info.hp }}/{{ user_info.max_hp }}
            </div>
            <div class="text item">灵气值：{{ user_info.user_exp }}</div>
            <div class="text item">
              战斗力：{{
                user_info.strength +
                user_info.defense +
                user_info.magic +
                user_info.speed +
                all_equiping_bs
              }}
              <span
                >(装 备 加 成 :
                <span style="color: green">{{ all_equiping_bs }})</span></span
              >
            </div>
            <div class="text item">所在区域：{{ user_info.now_map.name }}</div>
          </el-card>
        </div>
        <div class="user-item">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="fa fa-legal"></i>
              <span>装备</span>
            </div>
            <template>
              <div v-for="(value, index) in equipingbag" :key="index">
                <div class="text item">
                  {{ value.equipment.equipments_type.name }}:{{
                    value.equipment.name
                  }}
                </div>
              </div>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="user-skill-info">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="fa fa-eye"></i>
              <span>功法配置</span>
            </div>
            <div class="text item">主功法：功法名字ABC</div>
            <div class="text item">副功法：功法名字ABC</div>
            <div class="text item">心法：心法名字ABC</div>
            <div class="text item">轻功：轻功名字ABC</div>
            <div class="text item">备用位置：功法名字ABC</div>
          </el-card>
        </div>
        <div class="user-lastest-event">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="fa fa-calendar"></i>
              <span>最近事件</span>
            </div>
            <div class="text item">事件1</div>
            <div class="text item">事件2</div>
            <div class="text item">
              事件33333333333333333333333333333333333333333333333333333333333333333333333333333777
            </div>
            <div class="text item">事件4444</div>
            <div class="text item">55555555555555555555</div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      tableData: [],
      alltableData: [],
      user_info: {
        now_map_name: "",
      },
      map_info: [],
      equipingbag: [],
      all_equiping_bs: 0,
      //map_player_list: [],
      //battle_log:"",
    };
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  created() {
    this.getUserInfo();
    this.getMapInfo();
    this.getUserUsingbag();
  },
  mounted() {},
  methods: {
    getUserInfo() {
      // 获取玩家数据
      this.$axios
        .get("/api/users/getUserInfo")
        .then((res) => {
          this.user_info = res.data;
          console.log("Userinfo",res.data);
          //this.getNowMapPlayer();
        })
        .catch((err) => console.log(err));
    },
    getMapInfo() {
      // 获取地图数据
      this.$axios
        .get("/api/maps/getMapInfo")
        .then((res) => {
          let map_info = res.data;
          this.map_info = map_info;
        })
        .catch((err) => console.log(err));
    },
    // getNowMapPlayer() {
    //   // 获取地图角色数据
    //   let mid = this.user_info.now_map._id;
    //   console.log("mid",mid);
    //   let url = `api/maps/getplayer/${mid}`;
    //   this.$axios
    //     .get(url)
    //     .then((res) => {
    //       this.map_player_list = res.data;
    //     })
    //     .catch((err) => console.log(err));
    // },
    getUserUsingbag() {
      // 获取装备中背包的数据
      this.$axios
        .get("/api/equipments/user/getusing")
        .then((res) => {
          this.equipingbag = res.data;
          this.countequip(res.data);
        })
        .catch((err) => console.log(err));
    },
    // changeUserMapName() {
    //   for (let i = 0; i < this.map_info.length; i++) {
    //     if (this.user_info.now_map == this.map_info[i].mid) {
    //       this.$set(this.user_info, "now_map_name", this.map_info[i].name);
    //     }
    //   }
    // },
    countequip(equip_bag) {
      let equipingbag = equip_bag;
      let all_str = 0;
      let all_def = 0;
      let all_mag = 0;
      let all_spd = 0;
      let all_bs = 0;
      for (let i = 0; i < equipingbag.length; i++) {
        all_str += Math.floor(equipingbag[i].strength);
        all_def += Math.floor(equipingbag[i].defense);
        all_mag += Math.floor(equipingbag[i].magic);
        all_spd += Math.floor(equipingbag[i].speed);
      }
      all_bs = Math.floor(all_str + all_def + all_mag + all_spd);
      this.all_equiping_bs = all_bs;
    },
    // attack(uid){
    // // 攻击接口
    //   this.$axios
    //     .post(`/api/battles/player/${uid}`)
    //     .then((res) => {
    //       this.battle_log = res.data;
    //       this.getUserInfo();
    //       console.log(res.data);
    //     })
    //     .catch((err) => console.log(err));
    // }
  },
};
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* padding: 16px; */
}
.row-bg {
  width: 100%;
  height: 100%;
}
.user {
}
.user span {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  font-weight: bold;
}
.userinfo {
  background-color: #eee;
  border-right: #333;
  padding-left: 5%;
}
.user-item {
  height: 100%;
  padding-left: 5%;
  background-color: #eee;
  border-right: #333;
}
.user-item div {
  padding-top: 4px;
}
.user-lastest-event {
  height: 100%;
  background-color: #eee;
  border-right: #333;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.user-skill-info {
  background-color: #eee;
  border-right: #333;
}
.box-card {
  width: 97%;
}
</style>

